import React, { PureComponent } from 'react';
import accounting from 'accounting';
import { TableC, ModalC } from '../../../../comps';
import CashFlowTable from './cashFlowTable';

export default class AssetTable extends PureComponent {
  state = {
    columns: [
      {
        title: '负债端日期',
        key: 'liabilitySideDate',
        type: 'date',
      },
      {
        title: '负债端事件',
        key: 'liabilitySideEvent',
      },
      {
        title: '资产端现金流流入（元）',
        key: 'cashInFlow',
      },
      {
        title: '负债端现金流流出（元）',
        key: 'cashOutFlow',
        type: 'money',
        toFixed: 2,
      },
      {
        title: '现金流情况（元）',
        key: 'cashFlow',
        type: 'money',
        toFixed: 2,
      },
      {
        title: '利差',
        key: 'spread',
        type: 'rate',
      },
    ],
    rowData: undefined,
    rowModalShow: false,
  };
  getNewColumns = (columns) => {
    let newColumns = columns;
    newColumns.forEach((item) => {
      if (item.key === 'cashInFlow') {
        item.align = 'right';
        item.render = (text, record) => {
          if (text === null || text === undefined) {
            return '--';
          } else {
            return <a onClick={() => this.openFlowTable(record)}>{accounting.formatNumber(Number(text), 2)}</a>;
          }
        };
      }
      if (item.key === 'spread' || item.key === 'cashFlow') {
        item.onCell = (record, rowIndex) => {
          let cellProps = {};
          if (record[item.key] != undefined && record[item.key] < 0) {
            cellProps.style = {
              background: 'rgba(244, 66, 58, 0.1)',
            };
          }
          return cellProps;
        };
      }
    });
    return newColumns;
  };
  openFlowTable = (record) => {
    this.setState({
      rowData: record,
      rowModalShow: true,
    });
  };
  modalRnderer = () => {
    const { rowModalShow, rowData } = this.state;
    const ModalProps = {
      visible: rowModalShow,
      title: '明细',
      footer: null,
      maskClosable: false,
      width: 1000,
      destroyOnClose: true,
      onCancel: () => {
        this.setState({
          rowData: undefined,
          rowModalShow: false,
        });
      },
      children: <CashFlowTable recordData={rowData} />,
    };
    return <ModalC {...ModalProps} />;
  };
  render() {
    const { columns } = this.state;
    const { dataSource } = this.props;
    let newColumns = this.getNewColumns(columns);
    return (
      <div style={{ marginBottom: '16px' }}>
        <TableC dataSource={dataSource} columns={newColumns} selfScrollY={true} hidePage={true} />
        {this.modalRnderer()}
      </div>
    );
  }
}
